<template>
  <m-card>
    <view class="process">
      <view
        class="process-item"
        v-for="(item, index) in options"
        :key="index"
        @click="$u.route({
          url: '/pages-details/forums/index',
          params: {
            mId: item.tmf_id,
            meetingId: item.tmf_meeting_id
          }
        })"
      >
        <view class="tools flex column align-center">
          <view class="tools-dot"></view>
          <view class="tools-line" v-if="index !== options.length - 1"></view>
        </view>

        <!--  -->
        <view class="content font28 c333">
          <view class="c481 font32">{{ item.tmf_time_range }}</view>
          <!--  -->
          <view class="mgt20 flex align-center process-cell">
            <image
              :src="getImgUrl(item.tmf_icon)"
              class="process-cell__img"
              mode="aspectFill"
            ></image>
            <view class="process-cell__content">
              <view class="font32 c333 fw500">{{ item.tmf_name }}</view>
              <view class="font24 c999" style="margin-top: 6rpx"
                >{{ item.tmf_topic }}</view
              >
            </view>
          </view>
          <!--  -->
          <view class="process-address flex align-center">
            <view>
              <image src="@/static/icon/detail-map.png" style="width: 20rpx;height: 24rpx;"></image>
            </view>
            <view style="padding-left: 6rpx" class="c333 font24 text-ell"
              >{{ location(item) }}
            </view>
            <view
              class="mglauto process-address__btn c481 font24"
              @click.stop="subscribeHandler(item, index)"
              :class="{
                disabled: !!item.isReserve
              }"
              >{{ item.isReserve > 0 ? "已预约" : "预约" }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </m-card>
</template>

<script>
import {forumBookingApi } from "@/api/modules/homepage.js";

export default {
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      status: 0,
    };
  },
  methods: {
    async subscribeHandler(item, index) {
      uni.showLoading({
        title: '加载中'
      });
      try {
        await forumBookingApi({
          tmf_meeting_id: item.tmf_meeting_id,
          tmf_id: item.tmf_id
        })
        this.$u.toast('预约成功')
        item.isReserve = 1
        this.$emit('reserve', {
          row: item,
          index: index
        })
        await this.$u.sleep(2000);
      } catch (error) {
        
      }
      uni.hideLoading();
    },

    location(option) {
      const { tmf_prov_name: tmi_prov_name, tmf_city_name: tmi_city_name, tmf_region_name: tmi_region_name, tmf_address: tmi_address } =
        option;
      return tmi_prov_name + tmi_city_name + tmi_region_name + tmi_address;
    },
  },
};
</script>

<style lang="scss" scoped>
.process {
  margin: 20rpx 0;

  &-item {
    padding-left: 36rpx;
    padding-bottom: 40rpx;
    position: relative;

    &:last-child {
      padding-bottom: 0;
    }

    .tools {
      position: absolute;
      top: 16rpx;
      left: 0;
      height: 100%;

      &-dot {
        width: 16rpx;
        height: 16rpx;
        border: 4rpx solid #ff661f;
        border-radius: 50%;
        flex-shrink: 0;
      }

      &-line {
        width: 0;
        flex: 1;
        border-left: 2rpx dashed #bbbbbb;
      }
    }
  }

  &-cell {
    &__img {
      width: 204rpx;
      height: 120rpx;
      flex-shrink: 0;
      border-radius: 12rpx;
    }

    &__content {
      margin-left: 22rpx;
    }
  }

  &-address {
    margin-top: 26rpx;

    &__btn {
      flex-shrink: 0;
      padding: 4rpx 22rpx;
      border-radius: 40rpx;
      background: rgba(#481ec1, 0.1);
    }
  }
}

.disabled {
  background-color: rgba(#666666, 0.1);
  color: #666666;
}
</style>